<script>
import Popper from 'element-ui/lib/utils/vue-popper.js';
export default {
    name:'RsPickerDropDown',
    mixins: [Popper],
    mounted(){
        this.$parent.popperElm = this.popperElm = this.$el;
        this.referenceElm = this.$parent.$el;
    },
    methods:{
        doDestroy(){

        },
        getItems(rows,cols,icons){
            //<span class="title">rs-icon-auth</span>
            let idx = 0;
            const ret = []
            for(let i = 0; i < rows; i ++ ){
                const colIcons = []
                for( let j = 0; j < cols; j ++ ){

                    if( idx < icons.length ){

                        const icon = icons[idx++]
                        colIcons.push(
                            <div class="icon-item">
                                <div class="icon-wrap" on-click={()=>this.selectIcon(icon)}>
                                    <i class={[icon,"icon"]}></i>
                                </div>
                            </div>
                        )
                    }
                }
                ret.push(<div class="icon-rows">{colIcons}</div>)
            }
            return ret;
        },
        selectIcon(icon){
            //console.log(arguments)
            //this.$parent.$emit('select',icon)
            this.$parent.selectIcon(icon)
        }
    },
    render(){
        
        const {rows,cols,icons} = this.$parent;
        const style = {
            width: (cols * 42 + 10) + 'px',
            height:(rows * 42 + 10) + 'px'
        }
        const {showPopper,doDestroy} = this;
        return (
            <transition name="el-zoom-in-top" after-leave={doDestroy}>
                <div class="rs-picker-drop-down" v-show={showPopper} style={style}>
                    <el-scrollbar wrap-class="wrap">
                        {this.getItems(rows,cols,icons)}
                    </el-scrollbar>
                </div>
            </transition>
        )
    }
}
</script>